<!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <style type="text/css">
      body,
      html {
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "微软雅黑";
      }

      #allmap {
        width: 100%;
        height: 100vh;
	

      }

      p {
        margin-left: 5px;
        font-size: 14px;
      }
    </style>
    <script
      type="text/javascript"
      src="//api.map.baidu.com/api?v=3.0&ak=VeNlX17jPLxeiO4BzoL5rb1nyULo4LA9"
    ></script>

    <script
      type="text/javascript"
      src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"
    ></script>

    <script
      type="text/javascript"
      src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"
    ></script>

    <title>点聚合</title>
  </head>

  <body>
    <div id="allmap"></div>
    <!-- <p>缩放地图，查看点聚合效果</p> -->
  </body>
</html>

<script type="text/javascript">
  // 百度地图API功能
  var map = new BMap.Map("allmap",{showControls: true,"maxZoom": 30,
    "minZoom": 5});
  map.centerAndZoom(new BMap.Point(106.512321, 29.594555), 5);
  map.enableScrollWheelZoom();
  map.setMapStyleV2({
    styleId: "557e6acc62a351351ea90d8010fe933b",
  });
  var MAX = [];
  function ToManualRoamFunc(e) {
    if (e) {
      MAX = e;
      var pt = null;
      var i = 0;
      var markers = [];
      var arrayList = [];
      for (i = 0; i < MAX.length; i++) {
        pt = new BMap.Point(MAX[i].lng, MAX[i].lat);
        markers.push(new BMap.Marker(pt));
        arrayList.push(pt);
      }

      //创建聚合地图
      var markerClustererC = new BMapLib.MarkerClusterer(map, {
        markers: markers,
      });
      //到一定级别时显示文字
      map.addEventListener("zoomend", function (e) {
        let zoom = map.getZoom(); // 获取缩放级别
        console.log(zoom);
        if (zoom > 8) {
          let add = [];
          MAX.forEach((item, i) => {
            add.push(new BMap.Point(item.lng, item.lat));
          });
          add.forEach((item, i) => {
            var marker = new BMap.Marker(item);
            map.addOverlay(marker);
            var label = new BMap.Label(
              "司机：" + MAX[i].driver_name + ",电话：" + MAX[i].phone_number,
              { offset: new BMap.Size(20, -10) }
            );
            marker.setLabel(label);
          });
        } else if (zoom < 8) {
          markers = [];
          map.clearOverlays();
          for (i = 0; i < MAX.length; i++) {
            pt = new BMap.Point(MAX[i].lng, MAX[i].lat);
            markers.push(new BMap.Marker(pt));
          }
          var markerClustererC = new BMapLib.MarkerClusterer(map, {
            markers: markers,
          });
        }
      });
    }
  }
</script>
